 /*
 * @description: 客服系统登录页面
 * @Author: along
 * @Date: 2020-09-25
 * @Last Modified by: along
 * @Last Modified time: 2020-09-25
 */
<template>
    <div class="container">
        <img src="@/assets/image/login-1.png" class="container-bg-1">
        <img src="@/assets/image/login-8.png" class="container-bg-8">
        <img src="@/assets/image/login-5.png" class="container-bg-5">
        <img src="@/assets/image/login-9.png" class="container-bg-9">
        <img src="@/assets/image/login-6.png" class="container-bg-6">
        <div class="login-wrap">
            <img src="@/assets/image/login-2.png" class="container-bg-2">
            <img src="@/assets/image/login-4.png" class="container-bg-4">
            <img src="@/assets/image/login-3.png" class="container-bg-3">
            <img src="@/assets/image/login-7.png" class="container-bg-7">
            <div class="login-container">
                <img src="@/assets/image/login-10.png" class="container-bg-10">
                <el-form
                    :model="ruleform"
                    :rules="rules"
                    ref="ruleform"
                >
                    <el-form-item>
                        <img src="@/assets/image/login-11.png" class="container-bg-11">
                        <p class="username">账号:</p>
                        <el-input
                            v-model="ruleform.username"
                            @keyup.native.enter="fnfocus('inputPwd')"
                            class="account"
                        />
                    </el-form-item>
                    <el-form-item>
                        <img src="@/assets/image/login-12.png" class="container-bg-12">
                        <p class="username">密码:</p>
                        <el-input
                            ref="inputPwd"
                            type="password"
                            show-password
                            v-model="ruleform.password"
                            @keyup.native.enter="login()"
                        />
                    </el-form-item>
                    <div class="wrap">
                        <el-checkbox v-model="flag">记住您的账号和密码</el-checkbox>
                        <p
                            class="wrap-tip"
                            @mouseenter="dialog = true"
                            @mouseleave="dialog = false"
                        >忘记密码</p>
                        <p
                            class="wrap-dialog"
                            v-if="dialog"
                        >
                            <img src="@/assets/image/login-tip.png" class="wrap-bg">
                            <span>如果忘记密码请联系商家店铺管理员</span>
                        </p>
                    </div>
                    <el-form-item>
                        <p
                            class="login-btn"
                            :style="{background: ruleform.username && ruleform.password ? 'rgba(32, 160, 255, 1)' : 'rgba(32, 160, 255, .5)'}"
                            @click="login()">登&nbsp;&nbsp;录</p>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        let checkPass = (rule, value, callback) => {
            this.errMsgRemote = '';
            if (value.length < 6 || value.length > 18) {
                return callback(new Error('密码长度为6-18位'));
            }
            return callback();
        };

        return {
            dialog: false,
            flag: false,
            dist: '',
            ruleform: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: checkPass, trigger: 'blur' }
                ]
            },

        };
    },
    created() {
        let query = this.$route.query;

        if(query.target == 'quit') {
            this.$notify({
                title: "提示",
                message: '您的账号已在其它地方登录',
                type: "warning",
                duration: 2000,
            });
        }

        if(query.target == 'change') {
            this.$notify({
                title: "提示",
                message: '您的密码已修改',
                type: "warning",
                duration: 2000,
            });
        }

        this.dist = this.$route.params.dist ? this.$route.params.dist : '';
        this.getRecord();
    },
    methods: {
        /**
         * @description 登录
         */
        login() {
            this.$refs['ruleform'].validate((valid) => {
                if (valid) {
                    this.$post('/Login/login', {
                        username: this.ruleform.username,
                        password: this.ruleform.password
                    }, resp => {
                        if (resp.code == 1) {
                            this.$store.commit('global/SET_LOGIN', true);
                            sessionStorage.setItem('CUSTOM_LOGIN', true);
                            this.record(this.flag);
                            if (this.dist) {
                                this.$router.push({ path: this.dist.path, query: this.dist.query });
                            } else {
                                this.$router.push({ path: '/' });
                            }
                        } else if (resp.code == 0) {
                            this.$notify({
                                title: "提示",
                                message: resp.msg,
                                type: "warning",
                                duration: 2000,
                            });
                        }
                    });
                }
            });
        },

        /**
         * @description 下一步
         */
        fnfocus(name){
            this.$refs[name].focus();
        },

        /**
         * @description 查询是否记住账号密码
         */
        getRecord () {
            const account = localStorage.getItem('RECORDZD');

            if(account) {
                const data = JSON.parse(decodeURIComponent(account));

                this.$set(this.ruleform, 'username', data.account);
                this.$set(this.ruleform, 'password', data.password);
                this.flag = true;
            } else {
                return false;
            }
        },

        /**
         * @description 本地记录账号密码
         */
        record (type) {
            if(!type) return false;

            const data = {
                account: this.ruleform.username,
                password: this.ruleform.password
            };

            localStorage.setItem('RECORDZD', encodeURIComponent(JSON.stringify(data)));
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #20A0FF 0%, #4760FF 100%);
    .container-bg-1 {
        width: 273px;
        height: 267px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .container-bg-8 {
        width: 164px;
        height: 109px;
        position: absolute;
        left: 0;
        bottom: 51px;
    }
    .container-bg-5 {
        width: 197px;
        height: 138px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .container-bg-9 {
        width: 234px;
        height: 124px;
        position: absolute;
        right: 48px;
        top: 217px;
    }
    .container-bg-6 {
        width: 230px;
        height: 122px;
        position: absolute;
        top: 49px;
        left: 369px;
    }
}
.login-wrap {
    width: 1000px;
    height: 570px;
    background: #FFFFFF;
    box-shadow: 0px 0px 40px 0px rgba(23, 51, 190, 0.3);
    position: relative;
    z-index: 100;
    .container-bg-2 {
        width: 175px;
        height: 159px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .container-bg-4 {
        width: 132px;
        height: 108px;
        position: absolute;
        top: 0;
        right: 0;
    }
    .container-bg-3 {
        width: 165px;
        height: 132px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .container-bg-7 {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
}
.login-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .container-bg-10 {
        width: 530px;
        height: 72px;
        margin-top: 105px;
        margin-bottom: 56px;
    }
}
.container-bg-11, .container-bg-12 {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 13px;
    left: 24px;
    z-index: 100;
}
.username {
    font-size: 14px;
    color: #606972;
    position: absolute;
    top: 0px;
    left: 48px;
    z-index: 100;
}
.wrap {
    width: 360px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
    .wrap-tip {
        color: #999999;
        font-size: 14px;
        text-decoration: underline;
        cursor: pointer;
    }
    .wrap-dialog {
        position: absolute;
        width: 234px;
        height: 52px;
        right: -244px;
        top: -20px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666666;
        font-size: 12px;
        .wrap-bg {
            width: 271px;
            height: 92px;
            left: 0;
            top: 0;
            z-index: 0;
        }
        &>span {
            position: absolute;
            left: 20px;
            z-index: 10;
            white-space: nowrap;
        }
    }
}
.login-btn {
    width: 360px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
    background: rgba(32, 160, 255, .5);
    box-shadow: 0px 10px 20px 0px rgba(32, 160, 255, 0.3);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:active {
        background: #0C8EEE !important;
    }
}
.icon-icon-yonghushuju,
.icon-icon-mima{
    margin-left: 5px;
    font-size: 14px;
}
</style>
<style lang="less">
.login-wrap {
    .el-form-item.is-success .el-input__inner{
        border-color: #409EFF;
    }
    .el-form-item.is-success .el-input__validateIcon{
        color: #409EFF;
    }
    .el-input__inner {
        width: 360px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 20px;
        border: none;
        border: 1px #606972 solid;
        text-indent: 75px;
    }
    .el-input__suffix .el-input__icon {
        color: #333;
    }
    input::-webkit-input-placeholder {
        color: #606972;
    }
    .el-checkbox__label {
        color: #999999;
    }

    input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
        -webkit-text-fill-color: #333 !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
        background-color:transparent;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }
    input {
        background-color:transparent;
    }
}
</style>
